<template>
	<view class="bizPage">
		<status-bar title="订单详情" />
		<view class="padding20">
			<view class="card">
				<view class="item d-flex" v-for="(item,index) in list" :key="index">
					<view class="size28 color-666">{{ item.name }}：</view>
					<view class="flex-1 text-right size28 color-222">测试内容</view>
				</view>
			</view>
			<view class="card p-top40 p-bot40 size28 color-222">案件基本情况案件基本情况案件基本情况案件基本情况案件基本情况</view>
			<view class="card p-top30 p-bot30">
				<view class="d-flex a-center m-bot20">
					<view class="line m-right10"></view>
					<view class="size28 color-222 bold">用户上传文件</view>
				</view>
				<view class="upload" v-for="(item,index) in 2" :key="index">
					<image class="wh" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" mode="aspectFill"></image>
				</view>
				<view class="d-flex a-center m-bot20 m-top50">
					<view class="line m-right10"></view>
					<view class="size28 color-222 bold">律师上传文件</view>
				</view>
				<view class="upload p-re" v-for="(item,index) in 2" :key="index">
					<image class="wh" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg" mode="aspectFill"></image>
					<view class="over wh p-ab"></view>
					<view class="txt size24 white p-ab">第三方协议</view>
				</view>
			</view>
			<view class="btn flexac size28 white">再次咨询</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import statusBar from '../components/statusBar.vue'
	
	const list = ref([
		{ name: '用户姓名' },
		{ name: '联系电话' },
		{ name: '纠纷类型' },
		{ name: '受理法院' },
		{ name: '当事人身份' },
		{ name: '申请时间' },
		{ name: '接单律师' }
	])
</script>

<style lang="scss" scoped>
	.bizPage {
		min-height: 100vh;
		background: #F9F9F9;
	}
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-bottom: 20rpx;
		.item {
			padding: 30rpx 0;
			&:not(:last-child) {
				border-bottom: 1rpx solid #F2F2F2;
			}
		}
		.line {
			width: 4rpx;
			height: 28rpx;
			background: #0B77F0;
		}
		.upload {
			display: inline-block;
			width: 168rpx;
			height: 168rpx;
			border-radius: 10rpx;
			overflow: hidden;
			border: 1rpx solid #E1E1E1;
			margin-right: 20rpx;
			.over {
				background: rgba(0,0,0,0.2);
				top: 0;
				left: 0;
			}
			.txt {
				width: 100%;
				text-align: center;
				bottom: 20rpx;
				left: 0;
			}
		}
	}
	.btn {
		width: 690rpx;
		height: 82rpx;
		background: #0B77F0;
		border-radius: 20rpx;
		margin: 50rpx auto;
	}
</style>
